﻿<!-- src/components/UserList.vue -->
<template>
  <div>
    <h1>用户列表</h1>
    <button @click="fetchUsers">获取用户</button>
    <div v-if="loading">加载中...</div>
    <div v-if="error">错误: {{ error }}</div>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">
        <img :src="user.avatar" alt="avatar" width="50" />
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <div>
      <h2>添加用户</h2>
      <input v-model="newUser.first_name" placeholder="名" />
      <input v-model="newUser.last_name" placeholder="姓" />
      <button @click="createUser(newUser)">添加用户</button>
    </div>
    <div v-if="result">
      <h3>响应数据:</h3>
      <p>ID: {{ result.id }}</p>
      <p>名: {{ result.name }}</p>
      <p>姓: {{ result.email }}</p>
      <p>创建时间: {{ result.createdAt }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useAxiosStore } from '@/stores/AxiosStore';
import { storeToRefs } from 'pinia';

const axiosStore = useAxiosStore();

// 使用 storeToRefs 提取响应式属性
const { users, loading, error, result } = storeToRefs(axiosStore);

// 直接解构 actions
const { fetchUsers, createUser } = axiosStore;

const newUser = ref({
  first_name: '',
  last_name: '',
});
</script>
